<template>
  <van-tabbar route fixed placeholder border>
    <van-tabbar-item replace :to="{ name: 'home' }" icon="home-o">首页
      </van-tabbar-item>
      <van-tabbar-item replace :to="{ name: 'category'}" icon="apps-o">分类 

      </van-tabbar-item>
      <van-tabbar-item replace :to="{ name: 'message'}" icon="chat-o" badge ="4">消息

      </van-tabbar-item>
      <van-tabbar-item replace :to="{ name: 'cart'}" icon="shopping-cart-o " :badge="cartCount()">购物车

      </van-tabbar-item>
      <van-tabbar-item replace :to="{ name: 'user'}" icon="user-o">我的

      </van-tabbar-item>
  </van-tabbar>
</template>

<script setup>
import useCart from '../store/cart'

const { cartCount } = useCart()
</script>

<style scoped>
.van-tabbar-item {
--van-tabbar-item-active-color: #FF8000; }
</style>